<template>
    <page class="saveCollection">
        <page-header :showBack="ture">
            收藏列表
        </page-header>
        <div class="content">
            <p class="tips" v-if="itemList.length==0">暂无收藏记录</p>
           <slide-left @delete="itemDelete(item.id)" v-for="(item,index) in itemList" :key="index">
               <div class="item" @click="$router.push({name:'detail',query:{id:item.id}})">
                   <div class="left">
                    <img v-lazy="item.img" alt="">
                </div>
                <div class="right">
                    <div class="nm">{{item.nm}}</div>
                    <div class="time">{{item.s_time}}</div>
                </div>
               </div>
           </slide-left>
        </div>
    </page>
</template>

<script>
import slideLeft from "../components/slideLeft"
    export default {
        name: "saveCollection",
        data(){
            return {
                itemList:[]
            }
        },
        created(){
            var saveCollection=localStorage.getItem("saveCollection")||[]
           if(saveCollection!=null){
               this.itemList=JSON.parse(saveCollection)
           }
        },
        methods:{
        itemDelete(id){
            this.$confirm("确定要删除吗").then(()=>{
                let index = itemList.findIndex(item=>{
                    return item.id==id
                })
                if(index!=-1){
                    this.itemList.splice(index,1)
                    localStorage.setItem("saveCollection",JSON.stringify(this.itemList))
                }
            }).catch(()=>{
                
            })
        }
        },
        components:{
            slideLeft
        }
    }
</script>

<style lang="scss" scoped>
    @import "../assets/css/comm.scss";

    .saveCollection {
        @include flexbox(column);

        .content {
            flex: 1;
            overflow: auto;
          .tips{
              color: #cccccc;
              font-size: .36rem;
              @include flexbox();
              justify-content: center;
              margin-top: .2rem;
          }
        }
    }
</style>